<form nz-form [formGroup]="myForm" class="login-form" (ngSubmit)="submitForm()" nz-row >
  
    <nz-form-item nz-col [nzSpan]="span" *ngFor="let compOption of option.components" style="padding: 10px 0!important;margin-bottom: 10px !important;margin-top: 5px !important">
      <div nz-row>
  
        <nz-form-label nz-col [nzSpan]="option.labelSpan?option.labelSpan:8" [nzRequired]="compOption.require"> {{ compOption.label }} </nz-form-label>
          <nz-form-control nz-col [nzSpan]="option.compSpan?option.compSpan:16">
            <!-- 输入框 -->
            <div *ngIf="compOption.comp == 'NgsFormInput'" >
              <input type="text" *ngIf="compOption.type?compOption.type == 'text':true" nz-input [formControlName]="compOption.property" 
                    [placeholder]="compOption.placeHolder?compOption.placeHolder:''" />
              <nz-input-number [formControlName]="compOption.property"  *ngIf="compOption.type?compOption.type == 'number':false" [nzPlaceHolder]="compOption.placeHolder" style="width: 100%;"></nz-input-number>
            </div>
            <!-- 下拉框 -->
            <div *ngIf="compOption.comp == 'NgsFormSelect'" >
              <nz-select [formControlName]="compOption.property" [nzShowSearch]="compOption.openSerch" [nzMode]="compOption.model?compOption.model:'default'"  [nzAllowClear]="compOption.openSerch"
              (nzOnSearch)="selectSerch($event,compOption)" [nzOptionHeightPx]="getSelectSize(compOption)" [nzPlaceHolder]="compOption.placeHolder">
                <nz-option *ngFor="let optionitem of compOption.data" nzCustomContent  [nzLabel]="optionitem[compOption.dsLabel]" [nzValue]="optionitem[compOption.dsValue]">
                  {{ optionitem[compOption.dsLabel] }}<br/>
                  <span style="font-size: 12px;color: #999;">
                    {{ compOption.dsSubLabel }} {{ getSeletSubValue(compOption,optionitem) }}
                  </span>
                   
                </nz-option>
              </nz-select>
            </div>
            <!-- 时间选择框 -->
            <div *ngIf="compOption.comp == 'NgsFormDatePicker'" >
              <nz-date-picker [formControlName]="compOption.property" *ngIf="compOption.modelPicker == 'date'"></nz-date-picker>
              <nz-range-picker [formControlName]="compOption.property" *ngIf="compOption.modelPicker == 'range'"></nz-range-picker>
            </div>
            <!-- 单选框 -->
            <div *ngIf="compOption.comp == 'NgsFormRadio'" >
              <nz-radio-group [formControlName]="compOption.property">
                <label nz-radio *ngFor="let optionitem of compOption.dataSource" [nzValue]="optionitem[compOption.dsValue]">{{ optionitem[compOption.dsLabel] }}</label>
              </nz-radio-group>
            </div>
            <!-- 多选框 -->
            <div *ngIf="compOption.comp == 'NgsFormCheckbox'">
              <nz-checkbox-wrapper (nzOnChange)="checnkAction($event,compOption)">
                  <label nz-checkbox *ngFor="let optionitem of compOption.dataSource" [nzValue]="optionitem[compOption.dsValue]" >
                    {{ optionitem[compOption.dsLabel] }}
                  </label>
              </nz-checkbox-wrapper>
            </div>
            <!-- 级联 -->
            <div *ngIf="compOption.comp == 'NgsFormCascader'">
              <nz-cascader [formControlName]="compOption.property" [nzOptions]="compOption.dataSource"  [nzLabelProperty]="compOption.dsLabel?compOption.dsLabel:null" 
              [nzValueProperty]="compOption.dsValue?compOption.dsValue:null"></nz-cascader>
            </div>

            <!-- 上传 -->
            <div *ngIf="compOption.comp == 'NgsFormUploader'" class="upload-box">

                  <div class="upload-list" *ngFor="let event of compOption.data,let i = index">
                    <div *ngIf="compOption.accept == 'image'">
                      <img [src]="event.url" style="width: 100%;">
                      <div class="upload-list-ionc">
                        <i nz-icon nzType="zoom-in" nzTheme="outline" style="margin-right: 5px;" class="upload-list-serch" (click)="imageLook(1,event.url)"></i>
                        <i nz-icon nzType="delete" nzTheme="outline" class="upload-list-serch" (click)="del(compOption,i)"></i>
                      </div>
                    </div>
                    <div *ngIf="compOption.accept == 'video'">
                      <video [src]="event.url" style="width: 100%;"></video>
                      <div class="upload-list-ionc">
                        <i nz-icon nzType="zoom-in" nzTheme="outline" style="margin-right: 5px;" class="upload-list-serch" (click)="imageLook(2,event.url)"></i>
                        <i nz-icon nzType="delete" nzTheme="outline" class="upload-list-serch" (click)="del(compOption,i)"></i>
                      </div>
                    </div>
                    <div *ngIf="compOption.accept == 'file'" style="width: 200px;display: flex;justify-content: left;">
                      <img src="../../../../../assets/icon/rar.png" style="width:80px">
                      <span style="margin-left: 10px;">{{ event.name }}</span>
                      <div class="upload-list-ionc">
                        <i nz-icon nzType="delete" nzTheme="outline" class="upload-list-serch" (click)="del(compOption,i)"></i>
                      </div>
                    </div>
                  </div>
                  
                  <div class="upload-buttom" *ngIf="compOption.limit?compOption.data.length<compOption.limit:compOption.data.length<1">
                    <input type="file" (change)="upload($event,compOption)" class="upload-input" [accept]="getAccept(compOption.accept)">
                    <span class="upload-ionc">
                      <i nz-icon nzType="plus" nzTheme="outline" ></i>
                      上传
                    </span>
                  </div>
            </div>
          </nz-form-control>
      </div>
    </nz-form-item>

    <nz-form-item nz-col [nzSpan]="span" *ngIf="option.showSearch" style="padding-top: 15px !important;" class="form-bottoms">
      <div nz-row >
        <div nz-col nzSpan="8"></div>
        <nz-form-control class="ngs-form-buttom" >
          <button nz-button nzType="primary" >查询</button>
          <button nz-button nzType="default" (click)="resetForm()" style="margin-left:5px">重置</button>
        </nz-form-control>
      </div>
    </nz-form-item>
</form>

<nz-modal [(nzVisible)]="modal.isVisible" [nzFooter]="null" (nzOnCancel)="handleCancel()" [nzWidth]="800">
  <ng-container *nzModalContent>
    <img [src]="modal.url" *ngIf="modal.type == 1">
    <video style="width: 100%;" *ngIf="modal.type == 2" controls>
      <source [src]="modal.url" type="video/mp4">
    </video>
  </ng-container>
</nz-modal>